<template>
	<div class="device_menu">
		<div class="menu_search">
			<el-input
				class="menu_search_input"
				v-model="searchText"
				placeholder="设备名称"
				@input="handleInputChange"
			>
				<template #suffix>
					<img src="../../image/icon_search.png" />
				</template>
			</el-input>
		</div>
		<div class="menu_cell">
			<template v-for="(item, index) in menuArray">
				<div class="cell_item cursor-pointer" @click="handleMenuItem(item, index)">
					<div class="item_icon">
						<img
							:class="{ item_icon_out: openMenuId == item.id, item_icon_in: openMenuId != item.id }"
							src="../../image/icon_cell_close.png"
							alt
						/>
						<img
							:class="{ item_icon_out: openMenuId != item.id, item_icon_in: openMenuId == item.id }"
							src="../../image/icon_cell_open.png"
						/>
					</div>
					<img class="item_header" src="../../image/icon_video_cell.png" alt />
					<span>{{ item.name }}</span>
					<span style="margin-left: 10px">({{ getDeviceStatusCount(item.children) }}/{{ getDeviceStatusCount(item.children,2) }})</span>
				</div>
				<div
					class="sub_box"
					:style="item.children && item.children.length > 0 && openMenuId == item.id ? `max-height: ${sub_max_height}px;` : 'max-height: 0;'"
				>
					<template v-for="(sub, idx) in item.children">
						<div
							class="cell_sub_item cursor-pointer"
							:class="{ sub_active: checkedMenuId == sub.id }"
							@click="handleSubItem(sub, item)"
						>
							<div class="cricle" :class="'status_' + sub.status"></div>
							<img class="sub_header" src="../../image/icon_video_total.png" alt />
							<div class="name">{{ sub.name }}</div>
						</div>
					</template>
				</div>
			</template>
		</div>
		<div class="menu_footer">
			<div>设备状态</div>
			<div class="box">
				<div class="box_item" v-for="(item, index) in props.deviceStatus" :key="index">
					<div :style="{ 'background-color': item.color }"></div>
					{{ item.name }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { deepClone } from '/@/utils/other';
import { validateNull } from '/@/utils/validate';

const props = defineProps({
	/**
	 * 菜单列表
	 * 默认类型：[{id:1,name:'菜单1',children:[{id:2,name:'菜单2'}]}]
	 */
	menuList: {
		default: [],
		type: Array,
	},
	/**
	 * 默认选中菜单
	 */
	defaultCheckedMenuId: {
		default: null,
		type: String,
	},
	/**
	 * 设备状态列表
	 */
	deviceStatus: {
		default: [
			{
				name: '在线',
				color: '#00C885',
			},
			{
				name: '离线',
				color: '#FF4C4C',
			},
		],
		type: Array,
	},
});

const emits = defineEmits(['clickMenu']);

const searchText = ref('');
//展开菜单id
const openMenuId = ref('');
//选中菜单id
const checkedMenuId = ref('');
//菜单列表
const menuArray = ref([]);
const totalMenuArray = ref([]);
//子菜单最大高度
const sub_max_height = ref(0);

//点击菜单
const handleMenuItem = (row: any, index: any) => {
	if (openMenuId.value == row.id) {
		openMenuId.value = '';
	} else {
		openMenuId.value = row.id;
	}
};
//点击子菜单
const handleSubItem = (row: any, pRow: any) => {
	checkedMenuId.value = row.id;
	emits('clickMenu', row, pRow);
};

//输入框输入
const handleInputChange = (e: any) => {
	if (validateNull(e)) {
		initMenuArray();
	} else {
		let tempArray = [];
		totalMenuArray.value.forEach((item) => {
			let model = deepClone(item);
			let array = (model.children || []).filter((o) => {
				return o.name.indexOf(e) > -1;
			});
			if (array.length > 0) {
				model.children = array;
				tempArray.push(model);
			}
		});
		menuArray.value = tempArray;
	}
};

//初始化菜单
const initMenuArray = () => {
	menuArray.value = deepClone(totalMenuArray.value);
};

watch(
	() => props.menuList,
	() => {
		if (props.menuList.length > 0) {
			checkedMenuId.value = props.defaultCheckedMenuId;
			totalMenuArray.value = deepClone(props.menuList);
			initMenuArray();
			let maxCount = 0;
			menuArray.value.map((item) => {
				if (maxCount < (item.children && item.children.length)) {
					maxCount = item.children && item.children.length;
				}
				if (item.children && item.children.length > 0) {
					let idx = item.children.findIndex((o) => {
						return o.id == checkedMenuId.value;
					});
					if (idx != -1) {
						openMenuId.value = item.id;
					}
				}
			});
			sub_max_height.value = maxCount * 68;
		}
	},
	{
		immediate: true,
	}
);
/**
 * 获取设备数量
 * @param list 
 * @param status 1 在线  其他 不在线 
 */
const getDeviceStatusCount = (list = [],status = '1') =>{
	return list.filter(o => o.status == status).length
}
</script>
<style lang='less' scoped>
@import url('../../index.less');
.device_menu {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	border-radius: 4px;
}
.menu_search {
	width: 100%;
	height: 36px;
	margin-bottom: 4px;

	&_input {
		width: 100%;
		height: 100%;

		img {
			width: 12px;
			height: 12px;
		}
	}
	:deep(.el-input__wrapper) {
		background: url('../../image/bg_input_252.png') no-repeat;
		background-size: 100% 100%;
		box-shadow: none;
		.el-input__inner {
		background: transparent;
		color: #99e1fc;
	}
	}
	:deep(.el-input__wrapper.is-focus) {
		box-shadow: none;
	}
}
.menu_footer {
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px 0 12px;
	color: #c9ffff;
	font-size: 14px;
	border-radius: 4px;

	.box {
		display: flex;
		align-items: center;

		.box_item {
			display: flex;
			align-items: center;
			margin-right: 16px;

			&:last-child {
				margin-right: 0;
			}

			div {
				width: 6px;
				height: 6px;
				border-radius: 3px;
				margin-right: 8px;
			}
		}
	}
}
.menu_cell {
	height: calc(100% - 62px);
	width: 100%;
	overflow-y: auto;

	.cell_item {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 64px;
		box-sizing: border-box;
		color: #c9ffff;
		font-size: 14px;
		margin-bottom: 4px;
		background: url('../../image/icon_cell_bg.png') no-repeat;
		background-size: 100% 100%;

		.item_icon {
			width: 12px;
			height: 12px;
			margin-right: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				position: absolute;
			}
			.item_icon_out {
				animation: rotateOut 0.5s ease-in-out forwards;
			}
			.item_icon_in {
				animation: rotateIn 0.5s ease-in-out forwards;
			}
		}
		.item_header {
			width: 44px;
			height: 44px;
			margin-right: 12px;
		}
	}
}
.sub_box {
	transition: all 0.5s ease;
	overflow: hidden;

	.cell_sub_item {
		display: flex;
		align-items: center;
		height: 64px;
		box-sizing: border-box;
		color: #c9ffff;
		font-size: 14px;
		margin-bottom: 4px;
		border-radius: 4px;
		position: relative;
		background: url('../../image/icon_cell_bg.png') no-repeat;
		background-size: 100% 100%;

		.name {
			position: absolute;
			left: 123px;
			width: 62%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.cricle {
			width: 6px;
			height: 6px;
			border-radius: 3px;
			position: absolute;
			left: 50px;
		}
		.sub_header {
			width: 44px;
			height: 44px;
			position: absolute;
			left: 66px;
		}
	}

	.sub_active {
		background: url('../../image/icon_cell_bg_p.png') no-repeat;
		background-size: 100% 100%;
	}
}

@keyframes rotateIn {
	from {
		transform: rotateZ(-90deg);
		opacity: 0;
	}

	to {
		transform: rotateZ(0deg);
		opacity: 1;
	}
}

@keyframes rotateOut {
	from {
		transform: rotateZ(0deg);
		opacity: 1;
	}

	to {
		transform: rotateZ(90deg);
		opacity: 0;
	}
}
@selectColor: {
	1: #00c885;
	2: #ff4c4c;
};

each(@selectColor, {
        .status_@{key} {
            background-color: @value;
        }
    }

);
</style>